<template>
    <nav>
      <router-link to="/money" class="item" active-class="active">
        <Icon name="money"></Icon>
        记账
    </router-link> 
    <router-link to="/labels" class="item" active-class="active">
        <Icon name="label"></Icon>
        标签
    </router-link> 
      <router-link to="/statictics" class="item" active-class="active">
        <Icon name="statictics"></Icon>
        统计
    </router-link>
      <router-link to="/detail" class="item" active-class="active">
        <Icon name="details"></Icon>
        明细
    </router-link>
    
    </nav>
</template>

<script lang="ts">
    export default {
        name:'Nav'
        //dsfs
    }
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/helper.scss";
  nav{
    @extend %out;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    > .item{
        width: 33.33333%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .icon{
            width: 32px;
            height: 32px;
        }
    }
    > .item.active{
        color: $color-highelight
    }
  }
</style>